<template>
  <div class="login_container">
    <div class="login_box">
     <el-form ref="loginFormRef" model="loginForm" rules="loginRules" class="login_form" label-width="0px">
      <el-header>管理员登录</el-header>
        <el-form-item prop="username">
          <el-input v-model="loginForm.aname" prefix-icon="iconfont icon-denglu "></el-input>
        </el-form-item>
    
        <el-form-item prop="password">
          <el-input v-model="loginForm.apwd" prefix-icon="iconfont icon-mima " type="password"></el-input>
        </el-form-item>
     
        <el-form-item class="btns">
          <el-button type="primary" @click="login()">登录</el-button>
          <el-button type="info" @click="resetLoginForm()">重置</el-button>
        </el-form-item>

     </el-form>
    </div>
  </div>
</template>
<script>
export default{
  data(){
      return{
        //表单数据
          loginForm:{
              aname:"",
              apwd:""
          },
          //验证对象
          loginRules:{
            aname:[
              { required: true, message: '请输入用户名', trigger: 'blur' },
              
            ],
            apwd:[
             { required: true, message: '请输入密码', trigger: 'blur' },
             
            ],
          },
      };
  },
  methods:{
    //重置表单内容
    resetLoginForm(){
      this.$refs.loginFormRef.resetFields();
    },
    login(){
      this.$refs.loginFormRef.validate(async vaild=>{
        if(!vaild) return;
        const {data:res}=await this.$http.post("logina",this.loginForm);
        if(res=="ok"){
         window.sessionStorage.setItem("user",res.user);//存储user对象
         this.$message.success("操作成功！");
         this.$router.push({path:"/manhome"});
         this.$store.state.nowaname=this.loginForm.aname;
         
        }else{
         this.$message.error("操作失败！");
        }
      })
    },
  },
}
</script>
<style  scoped>

.login_container{
 background-color: #2b4b6b;
 height:100%;
}
.login_box{
 width:450px;
 height:300px;
 background-color: #fff;
 border-radius:3px;
 position: absolute;
 left:50%;
 top:50%;
 transform:translate(-50%,-50%);
}
.btns{
 display:flex;
 justify-content:flex-end;
}
.login_form{
 position: absolute;
 bottom:0%;
 width:100%;
 padding:0 10px;
 box-sizing:border-box;
}
</style>
